正文：
今天來做點實際的內容吧，正如標題，要做的內容為 ToDoList
這次內容包含

• 新增項目
• 刪除項目
• 項目群組

不包含修改項目!!
不包含精美樣式!!

好的，讓我們開始製作吧

第一步，確定我們的 todolist 內會有甚麼內容：

1. 為了防止項目重複，我們會需要一個唯一值 id:number
2. 我們需要一個文字內容 text:string
3. 我們需要記錄他的狀態是否完成 state:boolen

由上面得知，我們的 todolist 模型
再來呢，我們會需要一些變數來儲存目前的設定

• 我們會需要一個變數來給予不重複的 id ，這邊採用的是 order_id:number，每增加一個項目使其加一
• 我們會需要一個變數來判斷目前顯示的內容，分別為 全部 未完成 已完成 此變數為 mode:string
• 在要新增項目時，我們會需要一個變數來儲存新項目的內容 new_todolist_name:string

好的，在變數確定完之後確認一下會需要甚麼事件

1. 新增項目事件
2. 刪除項目事件，需要獲得項目編號
3. 更改項目事件，需要獲得將更改顯示的狀態
   最後，我們會需要一個會回傳符合目前顯示狀態的項目，命名為 filterTodolist:Array

好了，確定完需要甚麼內容後開始寫代碼吧

先將新增項目和切換項目的地方給寫好

<div id="app">
        <div class="todolist-header">ToDoList</div>
        <div class="todolist-input-area">
            <input v-model="new_todolist_name">
            <button type="button" @click="add_todolist()">新增</button>
        </div>
        <div class="todolist-state-group">
            <button class="state-all" @click="change_todolist_mode('all')">全部</button>
            <button class="state-undone" @click="change_todolist_mode('undone')">未完成</button>
            <button class="state-completed" @click="change_todolist_mode('completed')">已完成</button>
        </div>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                list_order: 0,
                mode: 'all',
                new_todolist_name: '',
                todolist: [],
            },
            methods: {
                add_todolist: function(){
                    this.order += 1;
                    this.todolist.push({
                        id: this.order,
                        name: this.new_todolist_name,
                        state: false
                    })
                },
                change_todolist_mode: function(mode){
                    this.mode = mode;
                }
            }
        })
    </script>

再來呢，將 todolist 透過 table 來顯示出來，並且添加刪除功能

        <table class="todolist-table">
            <thead class="todolist-table-head">
                <th>完成</th>
                <th>事項</th>
                <th>控件</th>
            </thead>
            <tbody class="todolist-table-content">
                <tr v-for="(item,index) in todolist" :key="index" class="todolist-table-item">
                    <td>
                        <input type="checkbox" :id="`checkbox_item_${index}`" v-model="item.state">
                    </td>
                    <td>
                        <span :id="`dotolist_item_${index}`">{{item.name}}</span>
                    </td>
                    <td>
                        <button type="button" @click="delete_todolist(item.id)">刪除</button>
                    </td>
                </tr>
            </tbody>
        </table>

vue methods

delete_todolist(todolist_id){
    let vm = this;
    vm.todolist.forEach((item,index) => {
        if(item.id == todolist_id){
            vm.todolist.splice(index,1);
        }
    });
}

最後，我們會需要一個 vue.computed 來代替 todolist 及時反應目前該顯示的值

methods: {},
computed: {
    filterTodolist: function(){
        if(this.mode == 'all'){
            return this.todolist;
        } else if(this.mode == 'undone'){
            return this.todolist.filter((item) => {
                if(item.state == false)
                    return item
            });
        } else{
            return this.todolist.filter((item) => {
                if(item.state == true)
                    return item
            });
        }
    }
}

然後將 html 中 v-for 的根據從 todolist 改成 filterTodoList

熱樣我們就有一個非常陽春的 todolist 可以使用囉

嘮叨一下：
鐵人賽的第一個假日就這樣要過了...時間真的抓不住留不下啊